<template>
  <div class="content">
    <el-menu
      router
      :default-active="$route.path"
      class="el-menu-vertical-demo"
      @open="handleOpen"
      @close="handleClose"
      @select="changeFocus"
      background-color="#ffffff"
      text-color="#000000"
      active-text-color="#ffd04b">
  <!--      <el-submenu index="0">-->
  <!--        <template slot="title">-->
  <!--          <i class="el-icon-location"></i>-->
  <!--          <span @click="indexReturn">首页</span>-->
  <!--        </template>-->
  <!--      </el-submenu>-->
      <el-menu-item :index="router.index" @click="emitHead('首页')">首页</el-menu-item>
      <el-submenu index="1">
        <template slot="title">
          <i class="el-icon-location"></i>
          <span>病历管理</span>
        </template>
          <el-menu-item :index="router.caseInfo" @click="emitHead('病历信息')">病历信息</el-menu-item>
          <el-menu-item :index="router.caseInput" @click="emitHead('病历导入')">病历导入</el-menu-item>
      </el-submenu>
      <el-submenu index="2">
        <template slot="title">
          <i class="el-icon-location"></i>
          <span>病历分析</span>
        </template>
        <el-menu-item :index="router.casePatientImg" @click="emitHead('患者图像')">患者图像</el-menu-item>
        <el-menu-item :index="router.caseTextGraph" @click="emitHead('文本图谱')">文本图谱</el-menu-item>
        <el-menu-item :index="router.caseSimilar" @click="emitHead('相似病例')">相似病例</el-menu-item>
        <el-menu-item :index="router.caseGraphicGraph" @click="emitHead('图文图谱')">图文图谱</el-menu-item>
      </el-submenu>
      <el-submenu index="3">
        <template slot="title">
          <i class="el-icon-location"></i>
          <span>专病分析</span>
        </template>
<!--        <el-menu-item :index="router.caseStatistics" @click="emitHead('病例统计')">病例统计</el-menu-item>-->
        <el-menu-item :index="router.caseWordCloud " @click="emitHead('词云统计')">病历统计</el-menu-item>
        <el-menu-item :index="router.caseTreatment" @click="emitHead('治疗方案')">治疗方案</el-menu-item>
      </el-submenu>
    </el-menu>
  </div>
</template>

<style>
a {
  text-decoration: none;
  color: inherit;
}

.el-menu-item {
  background-color: #f7f7f7 !important;
}
</style>

<script>
export default {
  data () {
    return {
      router: {
        index: '/index',
        caseInfo: '/case/info',
        caseInput: '/case/input',
        caseTextGraph: '/case/textGraph',
        caseGraphicGraph: '/case/graphicGraph',
        casePatientImg: '/case/patientImg',
        caseStatistics: '/case/statistics',
        caseTreatment: '/case/treatment',
        caseSimilar: '/case/similar',
        caseWordCloud: '/case/wordCloud'
      }
    }
  },
  methods: {
    handleOpen (key, keyPath) {
      console.log(key, keyPath)
    },
    handleClose (key, keyPath) {
      console.log(key, keyPath)
    },
    emitHead (name) {
      // console.log(name)
      this.$emit('showHead', name)
    },
    indexReturn () {
      this.$router.replace({path: '/index'})
    },
    changeFocus (index, indexPath) {
      console.log(index, indexPath)
    }
  }
}
</script>
